import React, { Component } from 'react'

class CheckboxWithLabel extends Component {
  constructor() {
    // parent constructor
    super()
    // bind `func`
    this._onChange = this._onChange.bind(this)
    // initial state
    this.state = {
      isChecked: false,
    }
  }
  _onChange() {
    this.setState({
      isChecked: !this.state.isChecked,
    })
  }
  render() {
    return (
      <label>
        <input type="checkbox"
          checked={this.state.isChecked}
          onChange={this._onChange}
          onClick={() => {
            this.setState({
              isChecked: !this.state.isChecked,
            })
          }}
        />
        {this.state.isChecked ? this.props.labelOn : this.props.labelOff}
      </label>
    )
  }
}

export default CheckboxWithLabel